<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./lib/bootstrap.css" />
    <script src="./lib/jquery.js"></script>
</head>

<body style="padding: 15px;">
    <!-- 添加图书的Panel面板 -->
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">添加新图书</h3>
        </div>
        <div class="panel-body form-inline">

            <div class="input-group">
                <div class="input-group-addon">书名</div>
                <input type="text" class="form-control" id="iptBookname" placeholder="请输入书名">
            </div>

            <div class="input-group">
                <div class="input-group-addon">作者</div>
                <input type="text" class="form-control" id="iptAuthor" placeholder="请输入作者">
            </div>

            <div class="input-group">
                <div class="input-group-addon">出版社</div>
                <input type="text" class="form-control" id="iptPublisher" placeholder="请输入出版社">
            </div>

            <button id="btnAdd" class="btn btn-primary">添加</button>
        
        
        </div>
    </div>

        <!-- 图书的表格 -->
        <table class="table table-bordered table-hover">
            <thead>
                <tr>
                    <th>Id</th>
                    <th>书名</th>
                    <th>作者</th>
                    <th>出版社</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody id="tb"></tbody>
        </table>

        <script>
            $(function() {
                // 获取图书列表数据
                function getBookList() {
                    // TODO: 获取图书列表，渲染到页面
                    // 实现步骤：
                    // 1. 下载好素材，找到对应页面
                    //   1. 接口查阅 接口文档
                    //   2. 关注请求的路径，请求方式，请求参数，响应结果
                    // 2. 利用$.get() 请求后台服务器，在回调函数里面接收结果
                    // 3. 根据返回状态码来判断是否成功请求到数据
                    // 4. 创建数组，用来存放行数据（rows）
                    // 5. 遍历服务器返回的数组，每遍历一次，利用数组（rows）去push  `<tr></tr>`
                    // 6. 每一行 tr 里面包含了 5 个 td 
                        //    `<tr><td>${内容1}</td><td>${内容1}</td><td>${内容1}</td><td>${内容1}</td><td>${内容1}</td></tr>`
                    // 7. 遍历循环完毕之后，找到内容容器，先清空当前内容（以免有重复数据），然后添加 rows
                    $.get('http://www.liulongbin.top:3006/api/getbooks', res => {
                        if (res.status !== 200) return alert('获取数据失败')
                        let arr = []
                        res.data.forEach((i) => {
                            arr.push(                        
                            `<tr>
                                <td>${i.id}</td>
                                <td>${i.bookname}</td>
                                <td>${i.author}</td>
                                <td>${i.publisher}</td>
                                <td><a href="javascript:;" class="del" data-index="${i.id}">删除</a></td>
                            </tr>`   
                            )
                        })
                        $('#tb').html(arr.join(''))
                    })
                }
                getBookList()


                // 删除功能
                $('#tb').on('click','.del',function() {
                    if (window.confirm('确实删除?')) {
                        let id = $(this).attr('data-index')
                        $.ajax({
                            type:'GET',
                            url:'http://www.liulongbin.top:3006/api/delbook',
                            data: {id},
                            success: res => {
                                if (res.status !== 200) return alert('删除失败')
                                getBookList()
                            }
                        })
                    }
                })


                // 添加功能
                $('#btnAdd').on('click',function() {
                    let bookname = $('#iptBookname').val().trim()
                    let Author = $('#iptAuthor').val().trim()
                    let Publisher = $('#iptPublisher').val().trim()
                    if (bookname.length <= 0 || Author.length <= 0 || Publisher.length <=0) return alert('请保证输入完整性')
                    $.post('http://www.liulongbin.top:3006/api/addbook',{bookname:bookname,author:Author,publisher:Publisher}, res => {
                        if (res.status !== 201) return alert('添加图书失败')
                        getBookList()
                        $('#iptBookname').val('')
                        $('#iptAuthor').val('')
                        $('#iptPublisher').val('')
                    })
                })
            })
        </script>

</body>

</html>